<template>
  <div class="relative w-full h-full px-4 vben-login">
    <div class="container relative h-full py-2 mx-auto sm:px-10">
      <div class="flex h-full">
        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
          <div class="vben-app-logo -enter-x">
            <img src="../../assets/images/logo.png" />
            <div class="ml-2 truncate md:opacity-100 vben-app-logo__title xs:opacity-0">
              {{ getSysTitle() }}
            </div>
          </div>
          <div class="my-auto">
            <img
              src="../../assets/images/login-box-bg.png"
              class="-mt-16 login-box-bg -enter-x"
            />
            <div class="mt-10 font-medium text-white -enter-x">
              <span class="inline-block mt-4 text-3xl">
                {{ getSysDescZh() }}
              </span>
            </div>
            <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
              {{ getSysDescEn() }}
            </div>
          </div>
        </div>
        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
          <div
            :class="`vben-login-form`"
            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
          >
            <QrCodeForm ref="qrCodeForm" :visible.sync="qrCodeFormVisible" @backLogin="handleBackLogin" />
            <LoginForm ref="loginForm" :visible.sync="loginFormVisible" @setLoginState="setLoginState"/>
            <MobileForm ref="mobileForm" :visible.sync="mobileFormVisible" @backLogin="handleBackLogin" />
            <ForgetPasswordForm ref="forgetPasswordForm" :visible.sync="forgetPasswordFormVisible" @backLogin="handleBackLogin" />
            <RegisterForm ref="registerForm" :visible.sync="registerFormVisible"  @backLogin="handleBackLogin" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'tailwindcss/tailwind.css';
import { isPhone, isPassWord, isCode } from '@/utils/validate';
import { getPhoneCode } from '@/api/user';
import LoginForm from './LoginForm';
import MobileForm from './MobileForm';
import QrCodeForm from './QrCodeForm';
import RegisterForm from './RegisterForm';
import ForgetPasswordForm from './ForgetPasswordForm';

export default {
  name: 'login',
  components: {
    LoginForm,
    MobileForm,
    QrCodeForm,
    RegisterForm,
    ForgetPasswordForm
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.trim().length === 0) {
        callback(new Error('用户名不能为空'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassWord(value)) {
        callback(new Error('请正确输入密码'));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error('手机号码有误，请重新填写'));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      if (!isCode(value)) {
        callback(new Error('验证码有误，请重新填写'));
      } else {
        callback();
      }
    };

    return {
      currentTab: 'user',
      loginFormVisible: true,
      mobileFormVisible: false,
      qrCodeFormVisible: false,
      registerFormVisible: false,
      forgetPasswordFormVisible: false,
      loginForm: {
        username: 'admin',
        password: 'admin123',
        phone: '',
        code: '',
        remember: true
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }]
      },
      loading: false,
      phoneCode: '获取验证码',
      codeStatus: false,
      currentCode: null
    };
  },
  methods: {
    getSysDescZh() {
      return process.env.VUE_APP_BASE_DESC_ZH;
    },
    getSysDescEn() {
      return process.env.VUE_APP_BASE_DESC_EN;
    },
    getSysTitle() {
      return process.env.VUE_APP_BASE_NAME;
    },
    setLoginState(data) {
      if (data === 'MOBILE') {
        this.loginFormVisible = false;
        this.mobileFormVisible = true;
        this.qrCodeFormVisible = false;
        this.registerFormVisible = false;
        this.forgetPasswordFormVisible = false;
      } else if (data === 'QR_CODE') {
        this.loginFormVisible = false;
        this.mobileFormVisible = false;
        this.qrCodeFormVisible = true;
        this.registerFormVisible = false;
        this.forgetPasswordFormVisible = false;
      } else if (data === 'REGISTER') {
        this.registerFormVisible = true;
        this.loginFormVisible = false;
        this.mobileFormVisible = false;
        this.qrCodeFormVisible = false;
        this.forgetPasswordFormVisible = false;
      } else if (data === 'ForgetPassword') {
        this.registerFormVisible = false;
        this.loginFormVisible = false;
        this.mobileFormVisible = false;
        this.qrCodeFormVisible = false;
        this.forgetPasswordFormVisible = true;
      } else {
        this.loginFormVisible = true;
        this.mobileFormVisible = false;
        this.qrCodeFormVisible = false;
        this.registerFormVisible = false;
        this.forgetPasswordFormVisible = false;
      }
    },
    handleBackLogin() {
      this.loginFormVisible = true;
      this.mobileFormVisible = false;
      this.qrCodeFormVisible = false;
      this.registerFormVisible = false;
      this.forgetPasswordFormVisible = false;
    },
    focusPassword() {
      this.$refs.password.focus();
    },
    //获取验证码
    getCode() {
      if (isPhone(this.loginForm.phone)) {
        this.codeStatus = true;
        let time = 60;
        var getPhoneIntval = setInterval(() => {
          if (time > 0) {
            time--;
            this.phoneCode = `重新获取(${time}s)`;
          } else {
            clearInterval(getPhoneIntval);
            getPhoneIntval = null;
            this.phoneCode = '获取验证码';
            this.codeStatus = false;
          }
        }, 1000);

        this.$refs.code.focus();
        getPhoneCode().then(res => {
          this.currentCode = res.data;
          setTimeout(() => {
            this.$notification.success(
              {
                message: '提示',
                description: '验证码获取成功，您的验证码为：' + res.data
              },
              12
            );
          }, 1000);
        });
      } else {
        this.$message.error('请正确输入手机号');
      }
    }
  }
};
</script>
<style lang="less">
@import './login.less';
</style>
